<template>
  <div class="comment">
    <van-field
      class="msg-box"
      v-model="message"
      rows="2"
      autosize
      label="来BB"
      type="textarea"
      maxlength="50"
      placeholder="请bb"
      show-word-limit
    />
    <van-button type="primary" block @click="postComments">确定BB</van-button>
    <div class="list">
      <van-card
        :desc="item.content"
        v-for="(item, index) in comments"
        :key="index"
      >
        <template #thumb>
          <div>
            <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
            <div>Svip{{ item.user_name }}</div>
          </div>
        </template>
        <template #title>
          <van-rate :v-model="item.rate" readonly />
        </template>
        <template #price> {{ item.add_time }} </template>
      </van-card>
    </div>
    <van-button type="danger" block @click="getMore" :disabled="hasMore">{{
      moreText
    }}</van-button>
  </div>
</template>

<script>
import { getComments, postComments } from '@/api/news'

export default {
  props: ['id'],
  data: () => ({
    message: '',
    value: 5,
    pageSize: 5,
    pageNo: 0,
    comments: [],
    hasMore: false
  }),
  created() {
    this.getComments()
  },
  methods: {
    async getComments() {
      // if (this.hasMore !== false) return
      ++this.pageNo
      const res = await getComments({ id: this.id, pageNo: this.pageNo, pageSize: this.pageSize })
      console.log(res)
      this.comments = this.comments.concat(res.data.message)
      this.hasMore = this.pageNo * this.pageSize > res.data.count
      console.log(this.hasMore)
    },
    getMore() {
      this.getComments()
    },
    async postComments() {
      await postComments({ id: this.id, content: this.message })
      this.comments.unshift({
        user_name: '大根君',
        add_time: new Date().getTime(),
        content: this.message,
        rate: 5
      })
    }
  },
  computed: {
    moreText() {
      return this.hasMore ? '被掏空了' : '加载更多'
    }
  }
}
</script>

<style lang="less" scoped>
.comment {
  .msg-box {
    border: 1px solid #ddd;
    margin: 10px 0;
  }
  .van-icon {
    font-size: 50px;
  }
  .van-card__conqtent {
    min-height: 76px;
  }
  .van-card__dese {
    margin-top: 5px;
  }
}
</style>